<html>
<head>

<link type="text/css" rel="stylesheet" href="../../../build/logger/assets/logger.css" />     
<link type="text/css" rel="stylesheet" href="../../../build/yuitest/assets/testlogger.css" />     

<style>
.everything { position:relative; height:420px; }
.everything div { border:1px solid #888; }
.topmain { position:absolute; top:10px; left:120px; height:75px; width:100px; }
.duo1 { position:absolute; top:130px; left:20px; height:67px; width:100px; }
#duo1 { background-image:url('http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg'); }
.duo2 { position:absolute; top:130px; left:220px; height:53px; width:100px; }
.src { position:absolute; top:220px; left:120px; height:72px; width:100px; }
.trigger { position:absolute; top:330px; left:120px; height:75px; width:100px; }
.sizer { position:absolute; top:450px; left:20px; height:150px; width:200px; }
.sharedTrigger1 { position:absolute; top:10px; left:420px; height:72px; width:100px; }
.sharedTrigger2 { position:absolute; top:10px; left:550px; height:67px; width:100px; }
.fold-top { position:absolute; top:130px; left:420px; height:75px; width:100px; }
.fold-bottom { position:absolute; top:500px; left:420px; height:75px; width:100px; }
.customTrigger { position:absolute; top:330px; left:420px; height:67px; width:100px; }

.yui-imgload { background:none !important; }
</style>

</head>

<body>

<div class='everything' id='everything'>
	<div class='topmain' id='topmain'></div>
	<div class='duo1 yui-imgload' id='duo1'></div>
	<div class='duo2'>
		<img class='yui-imgload' id='duo2' style='background-image:url("http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg");' width='100' height='53' />
	</div>
	<div class='src' id='srcImgCont'>
		<img id='srcImg' />
	</div>
	<div class='trigger' id='addlTrigger'></div>
	<div class='sizer'>
		<img id='sizerImg' style='visibility:hidden;' />
	</div>
	<div class='sharedTrigger1' id='sharedTrigger1'></div>
	<div class='sharedTrigger2' id='sharedTrigger2'></div>
	<div class='fold-top'>
		<img id='foldImgTop' />
	</div>
	<div class='fold-bottom'>
		<img id='foldImgBottom' />
	</div>
	<div class='customTrigger' id='customTrigger'></div>
</div>

<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../../build/event/event.js"></script>
<script type="text/javascript" src="../../../build/logger/logger.js"></script>
<script type="text/javascript" src="../../../build/yuitest/yuitest.js"></script>
<script type="text/javascript" src="../../../build/event-simulate/event-simulate.js"></script>
<script type="text/javascript" src="../../../build/imageloader/imageloader-min.js"></script>

<script>

var imgUrlsTestCase = new YAHOO.tool.TestCase({
	/* 
	 * Test case to check the URL setting in the different types of image objects
	 */
	
	name: 'Setting Urls',

	setUp: function() {
		// background-image group
		this.bgImgUrl = 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg';
		this.mainGroup = new YAHOO.util.ImageLoader.group('topmain', 'mouseover');
		this.mainGroup.registerBgImage('topmain', this.bgImgUrl);
		this.mainGroup.name = 'imgUrlsTestBgImg';
		this.mainGroupImage = document.getElementById('topmain');

		// src-image group
		this.srcImgUrl = 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg';
		this.srcGroup = new YAHOO.util.ImageLoader.group('srcImgCont', 'click');
		this.srcGroup.registerSrcImage('srcImg', this.srcImgUrl);
		this.srcGroup.name = 'imgUrlsTestSrcImg';
		this.srcGroupImage = document.getElementById('srcImg');
	},

	testBgImg: function() {
		YAHOO.util.UserAction.mouseover('topmain');
		// style.bgImg is "url('...')", but we can't rely on those quotes across browsers. indexOf is sufficient
		YAHOO.util.Assert.areNotEqual(this.mainGroupImage.style.backgroundImage.indexOf(this.bgImgUrl), -1);
	},
	
	testSrcImg: function() {
		YAHOO.util.UserAction.click('srcImgCont');
		YAHOO.util.Assert.areEqual(this.srcGroupImage.src, this.srcImgUrl);
	}

});

var classNameTestCase = new YAHOO.tool.TestCase({
	/*
	 * Test case to check fetching by CSS class name
	 */

	name: 'Class Name Fetching',

	setUp: function() {
		this.duo1Url = 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg';
		this.duo2Url = 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/katatjuta.jpg';
		this.duo1Image = document.getElementById('duo1');
		this.duo2Image = document.getElementById('duo2');
		// classname group
		this.classGroup = new YAHOO.util.ImageLoader.group('duo1', 'mouseover');
		this.classGroup.className = 'yui-imgload';
		this.classGroup.name = 'classNameTest';
	},

	testClassNames: function() {
		// We have to just check for the classname. Nothing else in the element will indicate the difference between before and after url application
		YAHOO.util.Assert.areEqual(this.duo1Image.className, 'duo1 yui-imgload');
		YAHOO.util.Assert.areEqual(this.duo2Image.className, 'yui-imgload');
		YAHOO.util.UserAction.mouseover('duo1');
		YAHOO.util.Assert.areEqual(this.duo1Image.className, 'duo1');
		YAHOO.util.Assert.areEqual(this.duo2Image.className, '');
	}

});

var addTriggerTestCase = new YAHOO.tool.TestCase({
	/*
	 * Test case for checking the addTrigger method
	 */

	name: 'addTrigger test',

	setUp: function() {
		this.imageUrl = 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/museum.jpg';
		this.triggerGroup = new YAHOO.util.ImageLoader.group('topmain', 'dblclick');
		this.triggerGroup.registerBgImage('addlTrigger', this.imageUrl);
		this.triggerGroup.addTrigger('addlTrigger', 'click');
		this.triggerGroup.name = 'addTriggerGroup';
		this.triggerImage = document.getElementById('addlTrigger');
	},

	testAddTrigger: function() {
		YAHOO.util.Assert.areEqual(this.triggerImage.style.backgroundImage, '');
		YAHOO.util.UserAction.click('addlTrigger');
		YAHOO.util.Assert.areNotEqual(this.triggerImage.style.backgroundImage.indexOf(this.imageUrl), -1);
	}

});

var customTriggerTestCase = new YAHOO.tool.TestCase({
	/*
	 * Test case for checking adding custom event triggers to a group
	 */
	
	name: 'custom trigger test',

	setUp: function() {
		this.imageUrl = 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg';
		this.customEvent = new YAHOO.util.CustomEvent('imageloader_unit_test_for_custom_trigger');
		this.triggerGroup = new YAHOO.util.ImageLoader.group();
		this.triggerGroup.addCustomTrigger(this.customEvent);
		this.triggerGroup.registerBgImage('customTrigger', this.imageUrl);
		this.triggerGroup.name = 'customTriggerGroup';
		this.triggerImage = document.getElementById('customTrigger');
	},

	testCustomTrigger: function() {
		YAHOO.util.Assert.areEqual(this.triggerImage.style.backgroundImage, '');
		this.customEvent.fire();
		YAHOO.util.Assert.areNotEqual(this.triggerImage.style.backgroundImage.indexOf(this.imageUrl), -1);
	}
	
});

var imgSizingTestCase = new YAHOO.tool.TestCase({
	/*
	 * Test case to check post-fetch resizing of image, as well as 'visibility' setting
	 */

	name: 'Image Sizing',

	setUp: function() {
		this.imageUrl = 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/japan.jpg';
		this.sizerGroup = new YAHOO.util.ImageLoader.group('sizerImg', 'mouseover');
		this.sizerGroup.name = 'imgSizingGroup';
		var sizerILImg = this.sizerGroup.registerSrcImage('sizerImg', this.imageUrl, 200, 150);
		sizerILImg.setVisible = true;
		this.sizerImage = document.getElementById('sizerImg');
	},

	testImageVisibility: function() {
		YAHOO.util.UserAction.mouseover('sizerImg');
		YAHOO.util.Assert.areEqual(this.sizerImage.style.visibility, 'visible');
	},

	testImageSizing: function() {
		// not sure if we can trust order, so make sure trigger was fired
		YAHOO.util.UserAction.mouseover('sizerImg');
		YAHOO.util.Assert.areEqual(this.sizerImage.height, 150);
		YAHOO.util.Assert.areEqual(this.sizerImage.width, 200);
	}

});

var triggerRemovalTestCase = new YAHOO.tool.TestCase({
	/*
	 * Test case to check removing the trigger from groups that share the same trigger.
	 * During development, there was an initial problem of when one group fired, the other group's trigger was removed.
	 * This was due to the way the fetch() methods were passed to Event's addListener(); fixed by wrapping the fetch calls.
	 * More details available in js code comments, in addTrigger() method
	 */

	name: "Trigger Removal for Competing Groups' Triggers",

	setUp: function() {
		this.imageAUrl = 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/morraine.jpg';
		this.imageZUrl = 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/uluru.jpg';
		this.groupA = new YAHOO.util.ImageLoader.group('sharedTrigger1', 'click');
		this.groupA.registerBgImage('sharedTrigger1', this.imageAUrl);
		this.groupA.name = 'triggerRemovalGroup(A)';
		this.groupZ = new YAHOO.util.ImageLoader.group('sharedTrigger1', 'click');
		this.groupZ.registerBgImage('sharedTrigger2', this.imageZUrl);
		this.groupZ.addTrigger('sharedTrigger2', 'click');
		this.groupZ.name = 'triggerRemovalGroup(Z)';
		this.groupAImage = document.getElementById('sharedTrigger1');
		this.groupZImage = document.getElementById('sharedTrigger2');
	},

	testCompetingTriggers: function() {
		YAHOO.util.UserAction.click('sharedTrigger2');
		YAHOO.util.Assert.areNotEqual(this.groupZImage.style.backgroundImage.indexOf(this.imageZUrl), -1);
		YAHOO.util.Assert.areEqual(this.groupAImage.style.backgroundImage, '');
		YAHOO.util.UserAction.click('sharedTrigger1');
		YAHOO.util.Assert.areNotEqual(this.groupAImage.style.backgroundImage.indexOf(this.imageAUrl), -1);
	}

});

var foldConditionalTestCase = new YAHOO.tool.TestCase({
	/*
	 * Test case to check fold-conditional loading of a group
	 * We're faking the viewport size and fold determination so that everything will be dependable in any situation (including automated runs)
	 */

	name: "Fold Conditional Loading",

	setUp: function() {
		this.imageTopUrl = 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/japan.jpg';
		this.imageBotUrl = 'http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/small/japan.jpg';
		this.foldGroup = new YAHOO.util.ImageLoader.group();
		this.foldGroup.registerSrcImage('foldImgTop', this.imageTopUrl);
		this.foldGroup.registerSrcImage('foldImgBottom', this.imageBotUrl);
		this.foldGroup.foldConditional = true;
		this.foldGroup.name = 'foldConditionalGroup';
		this.groupTopImage = document.getElementById('foldImgTop');
		this.groupBotImage = document.getElementById('foldImgBottom');

		// override the foldCheck function of this group, because we'll need to fake things to make them dependable
		this.foldGroup._foldCheck = function() {
			var hLimit = 300;
			var wLimit = 1000;
			for (var id in this._imgObjs) {
				if (YAHOO.lang.hasOwnProperty(this._imgObjs, id)) {
					var elPos = YAHOO.util.Dom.getXY(this._imgObjs[id].domId);
					if (elPos[1] < hLimit && elPos[0] < wLimit) {
						this._imgObjs[id].fetch();
					}
				}
			}
		};
		
	},

	testFoldCheck: function() {
		this.foldGroup._foldCheck();
		YAHOO.util.Assert.areEqual(this.groupTopImage.src, this.imageTopUrl);
		YAHOO.util.Assert.areEqual(this.groupBotImage.src, '');
	}

});

var imageLoaderTestSuite = new YAHOO.tool.TestSuite('YUI ImageLoader Utility');
imageLoaderTestSuite.add(imgUrlsTestCase);
imageLoaderTestSuite.add(classNameTestCase);
imageLoaderTestSuite.add(addTriggerTestCase);
imageLoaderTestSuite.add(customTriggerTestCase);
imageLoaderTestSuite.add(imgSizingTestCase);
imageLoaderTestSuite.add(triggerRemovalTestCase);
imageLoaderTestSuite.add(foldConditionalTestCase);

YAHOO.tool.TestRunner.add(imageLoaderTestSuite);

YAHOO.util.Event.onDOMReady(function() {
	var logger = new YAHOO.tool.TestLogger();
    if (parent && parent != window) {
        YAHOO.tool.TestManager.load();
    } else {
        YAHOO.tool.TestRunner.run();
    }
});


</script>


</body>
</html>
